<template>
  <el-card class="bom-card">
    <el-table
        :data="bomList"
        border
        stripe
        style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <!-- 主物料编号 -->
      <el-table-column prop="mainMaterialCode" label="主物料编号" />
      <!-- 组成物料编号 -->
      <el-table-column prop="componentMaterialCode" label="组成物料编号" />
      <!-- 从 componentMaterial 中取 specification 作为规格型号 -->
      <el-table-column label="规格型号" align="center">
        <template #default="scope">
          {{ scope.row.componentMaterial?.specification || '无' }}
        </template>
      </el-table-column>
      <!-- 从 componentMaterial 的 unit 中取单位名称 -->
      <el-table-column label="单位" align="center">
        <template #default="scope">
          {{ scope.row.componentMaterial?.unit?.name || '无' }}
        </template>
      </el-table-column>
      <!-- 从 componentMaterial 中取 name 作为物料/产品名称 -->
      <el-table-column label="物料/产品" align="center">
        <template #default="scope">
          {{ scope.row.componentMaterial?.name || '无' }}
        </template>
      </el-table-column>
      <!-- 使用比例 -->
      <el-table-column prop="usageRatio" label="预计使用量" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
        </template>
      </el-table-column>
    </el-table>
    <div class="bom-footer" style="margin-top: 10px; text-align: right">
      <el-button size="small" type="primary" @click="handleAdd">新增BOM行</el-button>
    </div>
  </el-card>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {getBomList} from '@/api/production-order'; // 导入后端接口

const props = defineProps({
  orderCode: {
    type: String,
    required: true,
  },
});

const bomList = ref([]);

onMounted(() => {
  // 调用后端接口，传入工单编号查询BOM
  // 确认参数是否正确传递
  getBomList({ productionOrderCode: props.orderCode }).then((res) => {
    console.log("BOM接口响应：", res); // 打印完整响应，检查结构
    if (res.code === 200) {
      bomList.value = res.data || []; // 确认res.data是否为数组
    } else {
      console.error('BOM列表获取失败:', res.msg);
    }
  }).catch(err => {
    console.error("接口请求失败：", err); // 捕获网络错误
  });
});
</script>